<template>
	<div class="panel-content">
		<h1>渐变色圆角双环形图</h1>
		<div style="width: 240px; height: 280px; float: left" ref="chart"></div>
	</div>
</template>

<script>
import { init, graphic } from 'echarts';

export default {
	name: 'ringChart',
	data() {
		return {
			max: 16
		};
	},
	methods: {
		initCharts() {
			let myLine = init(this.$refs.chart);
			myLine.setOption({
				angleAxis: {
					clockwise: true, // 是否按顺时针，默认顺时针(true)。
					axisLine: {
						show: false
					},
					axisLabel: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					min: 0,
					max: this.max, //一圈的刻度值
					startAngle: 270 //初始角度
				},
				radiusAxis: {
					type: 'category',
					data: ['3', '4'], // 极坐标径向轴中的类目，这也是两个环的关键！！！！
					z: 10,
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					}
				},
				legend: {
					icon: 'rect', //图例文字块的样式
					show: true,
					// data: ['A', 'B', 'C'],
					bottom: '-6',
					left: 'left',
					textStyle: {
						color: '#00FCF9' //图例文字的颜色
					}
				},
				polar: {
					center: ['50%', '40%'], //图形位置，类似margin或padding
					radius: ['48%', '75%'] //图形大小
				},
				series: [
					{
						type: 'bar',
						data: [0, 12],
						itemStyle: {
							//渐变色关键代码
							color: new graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: '#29D1D2' },
								{ offset: 1, color: '#0795DF' }
							])
						},
						barWidth: 16, //这边特别注意：我是用来调两个圆环的间距的，和polar.radius 一起来调
						coordinateSystem: 'polar',
						name: '科员及以下：905人',
						roundCap: true,
						stack: 'a',
						z: 2
					},
					{
						type: 'bar',
						data: [0, this.max - 8],
						itemStyle: { color: 'rgba(55, 74, 132, 0.39)' },
						coordinateSystem: 'polar',
						roundCap: true,
						stack: 'a',
						z: 1
					},
					{
						type: 'bar',
						data: [2, 0],
						itemStyle: {
							color: new graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: '#F05749' },
								{ offset: 1, color: '#CA3628' }
							])
						},
						coordinateSystem: 'polar',
						name: '科级：100人',
						stack: 'a',
						roundCap: true,
						z: 4
					},
					{
						type: 'bar',
						data: [2, 0],
						itemStyle: {
							color: new graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: '#4F33D3' },
								{ offset: 1, color: '#B48EF1' }
							])
						},
						coordinateSystem: 'polar',
						name: '处级：31人',
						stack: 'a',
						roundCap: true,
						z: 3
					},
					{
						type: 'bar',
						data: [2, 0],
						coordinateSystem: 'polar',
						itemStyle: {
							color: new graphic.LinearGradient(0, 1, 0, 0, [
								{ offset: 0, color: '#ED325F' },
								{ offset: 1, color: '#FF84BB' }
							])
						},
						name: '厅级：4人',
						stack: 'a',
						roundCap: true,
						z: 2
					},
					{
						type: 'bar',
						data: [10, 0],
						itemStyle: {
							color: '#1E2E61'
						},
						coordinateSystem: 'polar',
						stack: 'a',
						roundCap: true,
						z: 1
					}
				]
			});
		}
	},
	mounted() {
		this.initCharts();
	}
};
</script>

<style scoped>
.panel-content {
	margin: 50px auto;
	display: inline-block;
}
.panel-content > div {
	padding: 20px;
	background-color: #0e1824;
}
</style>
